<template>
    <div class="form-bolist-edit-container">
        <div class="form-bolist-edit-title" v-if="!layerid">
            <div class="left-toolbar">
                <my-icon :type="'iconliebiao'" style="font-size: 24px;vertical-align: middle;"></my-icon>
                <span class="toobar-title">{{getIsDialog=='YES'?i18n('dialogDesign','对话框设计'):i18n('listDesign','列表设计')}}<span v-if="name">-{{name}}</span></span>
            </div>
            <div class="middle-toolbar">
                <template v-if="currentName=='edit2'">
                    <span @click="handleToolbar(0)" :class="{'changeBotton':true, 'active':activeIndex == 0}"><my-icon
                        :type="'iconcomputer_fill'"></my-icon>{{i18n('list.computerList','电脑端列表')}}</span>
                    <span @click="handleToolbar(1)" :class="{'changeBotton':true, 'active':activeIndex == 1}"><my-icon
                        :type="'iconmobilephone_fill'"></my-icon>{{i18n('list.mobileList','手机端列表')}}</span>
                </template>
            </div>
        </div>
        <div>
            <a-modal :zIndex="99999" v-model="tipVisible" :title="i18n('list.dataChange','内容变化，是否退出')">
                <template slot="footer">
                    <a-button key="submit" :loading="tipLoading" type="primary" @click="saveAndBack">
                        {{i18n("list.saveAndBack","保存并退出")}}
                    </a-button>
                    <a-button key="back"  :loading="tipLoading"  @click="back">
                        {{i18n("list.back","直接退出")}}
                    </a-button>
                    <a-button key="submit"  :loading="tipLoading" @click="handleTipCancel">
                        {{$ti18('rxForm.cancelBtn','取消')}}
                    </a-button>
                </template>
                <p>
                    {{i18n('list.dataChangeTip','检测到列表设置发生变化，直接退出新配置将不会保存，请选择退出方式')}}
                </p>
            </a-modal>
        </div>
        <rx-dialog class="rx-dialog-form-bo-list" @handOk="onSave" :oktext="oktext" btnalign="right" order="top" :showcancel="false" @cancel="cancel">
            <div v-if="currentName=='edit1' && getPkId" slot="toolbar">
                <a-button type="primary" @click="onNext">{{i18n('list.nextStep','下一步')}}</a-button>
            </div>
            <div v-if="currentName=='edit2'" slot="toolbar">
                <a-button class="toolbuton" type="primary" @click="onBefore">{{i18n('list.previous','上一步')}}</a-button>
                <a-button class="toolbuton" type="primary" @click="showModal()">{{i18n('list.genPage','生成页面')}}</a-button>
                <a-button type="primary" @click="onEditHtml">{{i18n('list.editPage','编辑页面代码')}}</a-button>
            </div>
            <rx-layout>
                <div slot="center">

                    <component ref="current" @initName="initName" :is="currentView" :pkId="getPkId" :layerid="layerid" :destroy="destroy" :otherAppId="otherAppId"
                           :isDialog="getIsDialog" :curAppObj="curApp" :activeIndex="activeIndex" :parentVm="this" :appDsAlias="getDsAlias"></component>

                </div>
            </rx-layout>
            <a-modal :zIndex="99999" :title="i18n('generatePage','你确定要生成页面吗？')" v-model="remarkVisible">
                <template slot="footer">
                    <a-button key="back" @click="handleCancel">{{$ti18('rxForm.cancelBtn','取消')}}</a-button>
                    <a-button v-if="!modal || !modal.saveHtml" type="primary" @click="handleOk(true)">{{i18n('list.overLay','覆盖生成')}}
                        </a-button>
                    <a-button key="submit" type="primary" @click="handleOk">{{$ti18('rxForm.okBtn','确定')}}</a-button>
                </template>
                <p>{{$ti18('rxForm.notes','备注')}}：</p>
                <br/>
                <p>
                    <a-textarea sty v-model="remark" :auto-size="{ minRows: 4}"></a-textarea>
                </p>
            </a-modal>
        </rx-dialog>
    </div>
</template>
<script>
import FormBoListEdit1 from "./FormBoListEdit1";
import FormBoListEdit2 from "./FormBoListEdit2";
import FormBoListEdit3 from "./FormBoListEdit3";
import {Util, RxDialog,App} from "@lowcode/jpaas-common-lib";
import FormBoListApi from '@/api/form/core/formBoList'
import EventListener from "./formsolution/EventListener";


export default {
    name: 'FormBoListEdit',
    props: ["isDialog", "pkId", "otherAppId","secondEdit","layerid", "destroy"],
    components: {
        FormBoListEdit1,
        FormBoListEdit2,
        RxDialog
    },
    mixins:[EventListener,App],
    data() {
        return {
            activeIndex:0,
            oktext: this.$ti18('rxForm.saveBtn','保存') + "&" + this.i18n('list.nextStep','下一步'),
            currentName: "edit1",
            edit1: FormBoListEdit1,
            edit2: FormBoListEdit2,
            currentView: FormBoListEdit1,
            remarkVisible: false,
            remark: "",
            modal: this,
            tipLoading: false,
            tipVisible:false,
            newPkId:this.pkId,
            // 定义默认按钮
            initButtons:[
                {toolId:1,toolPid:0,btnLabel:this.$ti18('rxList.add', '新增'),btnStyle:'primary',btnType:'listMethod',btnName:'_Add',btnIcon:'{"type":"jpaasIcon","icon":"iconcommon-add"}', btnClick:'onAdd',config: {isMax:"YES",height:600,width:800},needConfig: true,preDef:true},
                {toolId:2,toolPid:0,btnLabel:this.$ti18('rxList.editBtn','编辑'),btnStyle:'default',btnType:'listMethod',btnName:'_Edit',btnIcon:'{"type":"jpaasIcon","icon":"iconbrush"}',btnClick:'onEdit',config:  {isMax:"YES",height:600,width:800},needConfig: true,preDef:true},
                {toolId:4,toolPid:0,btnLabel:this.$ti18('rxList.detailBtn','明细'),btnStyle:'default',btnType:'listMethod',btnName:'_Detail',btnIcon:'{"type":"jpaasIcon","icon":"iconmore1"}',btnClick:'onDetail',config: {isMax:"YES",height:600,width:800},needConfig: true,preDef:true},
                {toolId:3,toolPid:0,btnLabel:this.$ti18('rxList.delBtn','删除'),btnStyle:'default',btnType:'listMethod',btnName:'_Remove',btnIcon:'{"type":"jpaasIcon","icon":"icontrash"}',btnClick:'onRemove',config: '',needConfig: false,preDef:true}
            ],
            name:''
        }
    },
    computed: {
        getPkId(){
            let _id = this.newPkId ;
            return _id ? _id : this.$route.query.pkId ? this.$route.query.pkId : '' ;
        },
        getIsDialog(){
            let _id = this.isDialog ;
            return _id ? _id : this.$route.query.isDialog ? this.$route.query.isDialog : '' ;
        },
        getDsAlias(){
            return this.$route.query.dsAlias ? this.$route.query.dsAlias : '' ;
        },

    },
    created() {
        this.initName()
    },

    methods: {
        initName(val){
            if(val){
                this.name = val
            }else {
                this.$nextTick(()=>{
                    let self = this;
                    setTimeout(function () {
                        if(self.$refs.current.getPinyinByName){
                            self.name = self.$refs.current.form.getFieldsValue().name
                        }
                    },1000)

                })
            }
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        pkChange(pkId){
            this.newPkId = pkId;
        },
        handleToolbar(i) {
            this.activeIndex = i;
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        onSave(vm, callback) {
            this.currentView.methods.handleSubmit(this, this.$refs.current, callback);
            vm.loading = false;
        },
        onNext() {
            this.currentView = this.edit2;
            this.currentName = "edit2";
            this.oktext = this.$ti18('rxForm.saveBtn','保存');
        },
        onBefore() {
            this.currentView = this.edit1;
            this.currentName = "edit1";
            this.oktext = this.$ti18('rxForm.saveBtn','保存') + "&" + this.i18n('list.nextStep','下一步');
            this.activeIndex=0;

        },
        showTipModal() {
            //判断当前组件是否为edit2，edit2才进行比较
            if (this.currentView==this.edit2){
                //退出之前使用md5校验数据是否发生变化
                this.$refs.current.validMd5Change()
                //数据无变化：false，直接退出
                if (!this.$refs.current.isChange){
                    this.$router.go(-1)
                    return;
                }
                this.tipVisible = true;

            }else {
                this.$router.go(-1)
            }

        },
        saveAndBack(e) {
            var self=this
            self.tipLoading = true;
            this.onSave(this,function () {
                self.tipLoading = false;
                self.$router.go(-1)
            })

        },
        back(){
            this.tipLoading = false
            this.$router.go(-1)
        },
        handleTipCancel(e) {
            this.tipLoading = false
            this.tipVisible = false;
        },
        onGenHtml(flag) {
            var self_ = this;
            this.onSave({}, function () {
                FormBoListApi.genHtml(self_.getPkId, self_.remark,flag).then(res => {
                    self_.onEditHtml();
                })
            })
        },
        onEditHtml(html) {
            var self = this;
            var baseConf = {
                curVm: this,
                component: FormBoListEdit3,
                data: {pkId: this.getPkId, showModal: this.showModal,secondEdit:this.secondEdit},
                title: 'HTML' + this.i18n('list.preview','代码预览'),
                max: true,
                cancel:function (){
                    self.modal = null;
                }
            };
            Util.open(baseConf, function (action) {
                self.modal = null;
            });
        },
        showModal(self) {
            if (!this.getPkId) {
                this.onGenHtml();
            } else {
                if (self) {
                    this.modal = self;
                }
                this.remark = "";
                this.remarkVisible = true;
            }
        },
        handleCancel(){
            this.remarkVisible = false;
        },
        handleOk(flag) {
            this.remarkVisible = false;
            if (this.modal && this.modal.saveHtml) {
                this.modal.saveHtml(this.modal, this.remark);
            } else {
                this.onGenHtml(flag);
            }
        }
    }
}
</script>
<style scoped>
.toolbuton {
    margin-right: 4px;
}

.form-bolist-edit-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.form-bolist-edit-title {
    height: 40px;
    position: relative;
    align-items: center;
    display: flex;
    background-image: linear-gradient(90deg, #2f70ff 0%, #2ca8ff 100%), linear-gradient(#31539b, #31539b);
}

.left-toolbar {
    position: absolute;
    top: 0px;
    left: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;
}

.left-toolbar .toobar-title {
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

.form-bolist-edit-title .middle-toolbar {
    flex: 1;
    text-align: center;
    font-size: 12px;
}

.form-bolist-edit-title .middle-toolbar i {
    font-size: 16px;
}

.form-bolist-edit-title .right-toolbar {
    margin-right: 10px;
}

.middle-toolbar .changeBotton {
    padding: 5px 8px;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
    cursor: pointer;
}
.middle-toolbar .changeBotton i{
    vertical-align: -4px;
    margin-right: 6px;
}
.middle-toolbar .changeBotton.active {
    background-color: #fff;
    color: #2e86ff;
}

.middle-toolbar .changeBotton:first-child {
    margin-right: 20px;
}

.rx-dialog-form-bo-list >>> .ant-layout-footer{
    z-index: 10!important;
}
</style>